<template>    
    <div class="large-page">
        <div id="map"></div>
        <div id="notification"></div>
    </div>
</template>

<script>
export default {
    name:'MyGISMap',
    components: {
    },
    props: {    
    },
    data () {
        return {         
          btn:true,  //默认true为显示
        }
    },
    methods:{  

      mapOnLoad(){

             // init tianditu maps
            var vec = L.KqGIS.tiandituTileLayer({layerType: "vec"});
            var img = L.KqGIS.tiandituTileLayer({layerType: "img"});
            var ter = L.KqGIS.tiandituTileLayer({layerType: "ter"});
            var cva = L.KqGIS.tiandituTileLayer({layerType: "cva"});
            var eia = L.KqGIS.tiandituTileLayer({layerType: "eia"});

            var baseMaps = {
              "矢量图层": vec,
              "影像图层": img,
              "地形晕染图层": ter
            };

            var overlays = {
              "中文注记图层": cva,
              "英文注记图层": eia
            };
           
            var map = L.map('map', {                
                zoomControl: true,
                center: [34, 114],
                zoom: 7,
                attributionControl: false,
                layers: [vec, cva]
            });

            //添加常用底图图层切换按钮
            L.control.layers(baseMaps, overlays).addTo(map).setPosition("topleft");

            //L.KqGIS.tiandituTileLayer({ layerType: 'vec' }).addTo(map);
            //L.KqGIS.tiandituTileLayer({ layerType: 'cva' }).addTo(map);           

            let ZTT = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007ZLRF/map";
            L.KqGIS.tileMapLayer(ZTT, {}).addTo(map);

            // 添加鹰眼控件
            var img = L.KqGIS.tiandituTileLayer({ layerType: "img", attribution: null });
            new L.Control.MiniMap(img).addTo(map);  
            
            
             // 创建一个绘制图层
             var editableLayers = new L.FeatureGroup();
            map.addLayer(editableLayers);

            // 捕捉绘制控件参数设置
            var pm_options = {
                position: 'topright', // 控件位置
                drawMarker: true, // marker绘制是否可选
                drawPolygon: true, // drawPolygon绘制是否可选
                drawPolyline: true, // drawPolyline绘制是否可选
                editPolygon: true, // editPolygon编辑是否可选
                deleteLayer: true
            };

            // 添加捕捉绘制控件
            map.pm.addControls(pm_options);
            
            /*----------------*/

           let dataUrl = "http://gis24.jlu3s.com:8699/kqgis/rest/services/HeNan.2007ZLRF/data";
           L.Control.AttributeQuery = L.Control.extend({
            onAdd: function (map) {
              var control_html = L.DomUtil.create('div', 'attribute_query');
              var template = `<div id="maptools">
                              <div>
                                  <span>图层</span>
                                  <input  type="text" value="某图层" readonly>
                              </div>
                              <div>
                                  <span>查询条件</span>
                                  <input  type="text" value=" 'F1' like '%安阳%'" readonly>
                              </div>
                              <div>
                                  <span>查询结果</span>
                                  <textarea id="result" class="k-textbox" style="resize: none"></textarea>
                              </div>
                              <button id="query">属性查询</button>
                          </div>
                          `;
              setTimeout(function () {
                $('.attribute_query').append(template);
              });

              return control_html;
            }
        });
        L.control.attributeQuery = function (opts) {
          return new L.Control.AttributeQuery(opts);
        };
        L.control.attributeQuery({ position: 'topleft' }).addTo(map);
        
        setTimeout(function () {
          // 初始化kendo容器
          $('#query')
            .kendoButton({
              click: function () {
                let filter = new KqGIS.SQLFilterParams({ where: " 'F1' like '%安阳%' " });
                let params = new KqGIS.Data.GetFeaturesBySQLParams({
                  layerId: 1,
                  attributeFilter: filter,
                  // fromIndex: 1,
                  // toIndex: 2,
                  returnContent: true,
                  hasGeometry: true
                });
                L.KqGIS.dataFeatureService(dataUrl).getFeaturesBySQL(params, onsuccess, onfailed);
              }
            })
            .data('kendoButton');

          var notification = $('#notification')
            .kendoNotification({
              position: {
                pinned: true,
                bottom: 12,
                right: 12
              },
              autoHideAfter: 2000,
              stacking: 'up',
              templates: [
                {
                  type: 'info',
                  template: `<div>#= message #</div>`
                }
              ]
            })
            .data('kendoNotification');

          L.DomEvent.disableScrollPropagation($('#maptools')[0]).disableClickPropagation($('#maptools')[0]);

          var onsuccess = function (response) {
            $('#result').val(formatJson(response.result));
            //L.geoJSON(response.result.result.features).addTo(map);
            L.geoJSON(response.result.result.features,{
                //onEachFeature:onEachFeature,
                // style: {   
                //   "color": "#ff7800",
                //   "weight": 5,
                //   "opacity": 0.65
                // }
                style: function(feature){
                  return {
                    // color: feature.properties.color,
                    // stroke: feature.properties.stroke,
                    // weight: feature.properties.weight,
                    // opacity: feature.properties.opacity,
                    // fillColor: feature.properties.fillColor,
                    // fillOpacity: feature.properties.fillOpacity,
                    "color": "#ff7800",
                    "weight": 5,
                    "opacity": 0.65
                  }
                },


            }).addTo(map);
            notification.show({ message: '请求成功' }, 'info');
          };

          var onfailed = function () {
            notification.show({ message: '请求失败' }, 'info');
          };
        });
      }

    },
    created(){     
    },
    mounted(){      
      this.mapOnLoad();
    },
    watch:{},
    computed:{    
    }        
}      

</script>

<style scoped>
.large-page {
    width: 100%;
    height: 100%;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 #map {
    /* position: inherit; */
    /* width: calc( 100vw - 120px );
    height: calc( 100vh - 50px ); */
    width: 100%;
    height: 100%;
    background-color: rgb(40, 230, 230);
 }
</style>
